<template>
	<div>
		<div :class="[ 'ov' , opKey ? 'on':'']" @click="OpClose"></div>
		
		<div class="pop key" :class="[ 'pop key' , opKey ? 'on':'']">
			<div class="tit"> {{$t('page.documentary')}}</div>
			<div class="p">{{$t('page.jy_num')}}</div>
			<div class="input">
				<input name="amount" type="number" v-model="t_int" :placeholder="$t('page.jy_num_inp')" placeholder-class="keyteo" />
				<text class="label">USDT/BTC</text>
			</div>
			<p>minimum：{{tz_money[mul_i]}}</p>
			
			<div class="radio">
				<div v-for="(item,index) in mulData" @click="mulTop(index)"
					:class="['rad' , index == mul_i? 'btn-c-lan':'on' ]" >
					{{item}}X
				</div>
				<!-- <div :class="['rad' , multiple == '1' ? 'btn-c-lan':'on']">
					<input type="radio" value="1" v-model="multiple"> 1X
				</div> -->
			</div>
			
			<div class="f-btn">
				<div class="btn-border">
					<button class="sub" @click="OpClose">{{$t('page.Cancel')}} </button>
				</div>
				<div class="btn-border">
					<button class="sub on" @click="FormKey()">{{$t('page.Revise')}}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	export default {
		name: "OrderMoney",
		data() {
			return {
				opKey:false,
				order_id:'',
				t_int:'',
				mul_i:2,
				mulData:[1,5,10,20,30,50,100,125],
				tz_money:[0,5000,30000,100000,300000,500000,1000000,3000000],
				address:''
				
			}
		},
		mounted() {
			// 获取钱包地址
			this.address = this.$dapp.getAddress();
		},
		methods: {
			show(e){
				console.log(e);
				this.order_id = e;
				this.opKey = true;
			},
			mulTop(e){
				this.mul_i = e;
			},
			
			OpClose(){
				this.opKey = false;
				
			},
			async FormKey(){
				var tz_money = [0,5000,30000,100000,300000,500000,1000000,3000000]
				var multiple = this.mulData[this.mul_i];
				var tz_on = tz_money[this.mul_i]
				
				if(this.t_int < tz_on){
					Toast.fail(multiple +"X---"+ this.$t('tis.jy_money') + tz_on )
					return;
				}else if(!this.$dapp.getAddress()){
					Toast.fail(this.$t('tis.addressNo'))
					console.log("没有地址")
					return;
				}else {
					console.log("运行")
					const {err,res} = await this.$request.post("/chss/userTrasaction/trade", {
						address: this.$dapp.getAddress(),
						order_number: this.order_id,
						amount:this.t_int,
						multiple : multiple
					});
					console.log(err)
					if (err === null) {
						Toast.success(this.$t('tis.gdSuccess'))
						console.log("跟单成功！")
						
						this.$emit('gddocu', res.chance_left)
						setTimeout(() =>{
							this.OpClose();
						},1000)
					}
				}
				
				
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.ov{
		position: fixed;  z-index: -1;
		top: 0px; bottom: 0px;
		width: 100%; height:100%;
		background: #000; opacity: 0;
		
		transition: all 1s;
		-webkit-transition:all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		
		&.on{
			z-index: 98;
			opacity: 0.5;
		}
		
	}
	.pop{
		position: fixed; text-align: center;
		top: 50%; left: 50%; z-index: -1;
		opacity: 0; border-radius: 10px;
		overflow: hidden; 
		
		
		transform: translate(-50%, -50%) scale(2 , 2); 
		-webkit-transform: translate(-50%, -50%) scale(2 ,2); 
		-moz-transform: translate(-50%, -50%) scale(2 , 2); 
		-ms-transform: translate(-50%, -50%) scale(2 , 2); 
		-o-transform: translate(-50%, -50%) scale(2 , 2); 
		
		
		transition: all 1s;
		-webkit-transition:all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;
	
		&.on{
			opacity: 1; z-index: 99; 
			transform: translate(-50%, -50%) scale(1);
			-webkit-transform: translate(-50%, -50%) scale(1); 
			-moz-transform: translate(-50%, -50%) scale(1); 
		}
	}
	
	.radio{
		.rad{display: inline-block;
			height:50px; line-height: 50px;  margin: 10px 1%;
			width: 23%; border-radius: 30px; overflow: hidden;
			
			&.btn-c-lan{color:#333;}
			&.on{
				border: 3px solid #49edff; box-sizing: border-box;
			}
		}
	}
	
	.key{
		padding: 30px; text-align: center; background: #20283d;
		.tit{font-size: 30px; color:#eee;}
		.p{color: #3F536E; margin-top: 30px; font-size: 26px;}
		.input{
			height: 90px; line-height: 90px; width: 600px;
			border-radius: 50px; border: 2px solid #2c395d;
			display: flex; margin: 40px 0px;
			
			.keyteo{color: #496296; font-size: 30px; }
			
			input{flex: 1; font-size: 28px; 
			background: transparent; border:none;
			
			width: 300px; height: 100%; text-align: left; padding: 0px 30px;}
			.iconfont{height: 50px; line-height: 50px; margin: 20px 20px; font-size: 50px;}
			.label{padding: 0px 30px;color: #496296; font-size: 28px; }
			
		}
		.f-btn{
			display: flex; justify-content:space-between; padding: 20px 0px;
			
			.btn-border{
				width:45%; 
				padding: 2px; box-sizing: border-box;
				border-radius: 35px;
				background: -moz-linear-gradient(#59e4f2 , #1d65cd);
				background: -webkit-linear-gradient(#59e4f2 , #1d65cd);
				background: -o-linear-gradient(#59e4f2 , #1d65cd);
				background: -ms-linear-gradient(#59e4f2 , #1d65cd);
				background: linear-gradient(#59e4f2 , #1d65cd);
			}
			
			.sub{
				font-size: 25px;
				height: 60px; line-height: 60px;  border-radius: 35px;
				background: #2c395d;
				color: #FFF; width: 100%;
				border:none;

				&.on{
					background: -moz-linear-gradient(to top right ,#1368f8 , #5ef2ff);
					background:  -webkit-linear-gradient(to top right ,#1368f8 , #5ef2ff);
					background: -o-linear-gradient(to top right  #1368f8 , #5ef2ff);
					background:  -ms-linear-gradient(to top right ,#1368f8 , #5ef2ff);
					background:  linear-gradient(to top right ,#1368f8 , #5ef2ff);
					color: #333;
				}
			}
		}
		
	}

</style>
